<template>
  <el-main style="background-color:#fff">
    <el-table
      :data="table.data"
      style="width: 100%"
      @cell-click="cellClick"
    >
      <el-table-column
        prop="id"
        label="序号"
        width="200"
        sortable="custom"
      />
      <el-table-column
        prop="name"
        label="名称"
        min-width="160"
      >
        <template #default="scope">
          <a>{{ scope.row.name }}</a>
        </template>
      </el-table-column>
      <el-table-column
        prop="url"
        label="地址"
        min-width="500"
      >
        <template #default="scope">
          <a>{{ scope.row.url }}</a>
        </template>
      </el-table-column>
    </el-table>
    <br>
    <el-pagination
      background
      layout="total, sizes, prev, pager, next"
      :total="table.total"
      :default-page-size="table.query.limit"
    />
  </el-main>
</template>

<script setup>
import { ref } from 'vue'

import router from '@/router/index.js'
import { listVideo } from '@/apis/netflow.js'
import axios from 'axios'
import { IP_LIST } from '../../../ip.config.js'

const table = ref({
  total: 0,
  query: {
    limit: 20,
    page: 1,
    order: null,
    email: null
  },
  data: []
})

const service = axios.create({
  // baseURL: import.meta.env.VE_API_URL,
  timeout: 30 * 1000
})

const getListVideo = () => {
  const params = { site: 'fun' }
  const response = service({
    url: IP_LIST[0] + '/networkflow/video/_query',
    method: 'get',
    params
  })
  response.then((result) => {
    console.log(result)
    table.value.data = Object.entries(result.data).map(([name, url], index) => ({ id: index + 1, name, url }))
  })
}

getListVideo()

const cellClick = (row, column, cell, event) => {
  router.push({
    name: 'managerDistribution',
    query: {
      name: row.name,
      url: row.url
    }
  })
}

</script>

<style lang="scss">
a {
  color: blue;
  cursor: pointer;
  //text-decoration: none; /* 移除默认的下划线效果 */
  &:hover, &:active {
    text-decoration: underline;
    color: red; // 可选：在悬浮时改变文本颜色
  }
}

</style>
